<template>
<div class="juheh5-bind_phone">
    <div class="account-header">
        <div class="back-icon" @click="handleBackClick">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
            </svg>
        </div>
        绑定手机
    </div>
    <div class="account-content">
        <div class="bind-phone-box">
            <input class="custom-input large" type="text" v-model="phone" placeholder="请输入手机号码">
            <div class="phone-code-box">
                <input class="custom-input code-size" type="text" v-model="code" placeholder="请输入手机验证码" autocomplete="one-time-code" maxlength="6">
                <div class="code-btn" :class="{ disabled: isForbid }" @click="handleGetPhoneCodeClick">{{ isForbid ? '已发送 ' + count : '获取验证码' }}</div>
            </div>
            <div class="large-btn bind-margin" @click="handleBindPhoneClick">立即绑定</div>
            <div class="bind-bottom-tips">绑定成功即可使用手机进行登录 或 找回密码</div>
        </div>
    </div>
</div>
</template>
<script>
import juheh5Service from '../../../services/juheh5Service';


export default {
    props: {
        modelValue: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            myValue: this.modelValue,
            phone: '',
            code: '',
            count: 0,
        };
    },
    watch: {
        modelValue: {
            deep: true,
            handler(newVal) {
                this.myValue = newVal;
            },
        },
        myValue: {
            deep: true,
            handler(newVal) {
                this.handleSyncData();
            },
        },
    },
    computed: {
        isForbid() {
            return this.count !== 0;
        }
    },
    methods: {
        handleBackClick() {
            this.myValue.currentComponent = '';
            this.myValue.currentComponentTab = '';
            this.myValue.generateAccount = false;
            juheh5Service.phoneBindCb({})
            return
        },
        handleGetPhoneCodeClick() {
            if (this.isForbid) {
                return false;
            }

            if (this.phone === '') {
                layer.msg('请输入手机号码', { time: 1000 });
                return false;
            }

            if (!this.phoneVerify(this.phone)) {
                layer.msg('手机号码格式错误', { time: 1000 });
                return false;
            }

            let localAccountInfo = JSON.parse(localStorage.getItem('account_info')) || [];
            if (localAccountInfo.length === 0) {
                layer.msg('无账号信息，请先注册账号', { time: 1000 });
                return false;
            }

            let currentAccount = localAccountInfo[0];
            if (currentAccount.phone !== '' && currentAccount.phone !== undefined) {
                layer.msg('已绑定手机号', { time: 1000 });
                return false;
            }

            axios.get('/api/phone_code/get', {
                params: {
                    type: 3,
                    phone: this.phone,
                    game_id: this.myValue.gameId
                }
            }).then(res => {
                let data = res.data;
                if (res.data.code != 0) {
                    layer.msg(data.msg, { time: 2000 });
                    return false;
                }

                layer.msg('短信已发送成功，请注意查看手机', { time: 2000 });
                this.countDown(60);
            }).catch((error) => {
                layer.msg(error, { time: 1000 });
            });

            return false;
        },
        handleBindPhoneClick() {
            if (this.phone === '') {
                layer.msg('请输入手机号码', { time: 1000 });
                return false;
            }

            if (this.code === '') {
                layer.msg('请输入验证码', { time: 1000 });
                return false;
            }

            if (!this.phoneVerify(this.phone)) {
                layer.msg('手机号码格式错误', { time: 1000 });
                return false;
            }

            let localAccountInfo = JSON.parse(localStorage.getItem('account_info')) || [];
            if (localAccountInfo.length === 0) {
                layer.msg('无账号信息，请先注册账号', { time: 1000 });
                return false;
            }

            let currentAccount = localAccountInfo[0];
            if (currentAccount.phone !== '' && currentAccount.phone !== undefined) {
                layer.msg('已绑定手机号', { time: 1000 });
                return false;
            }

            axios.post('/api/juheh5/account/phone_bind', {
                phone: this.phone,
                code: this.code,
                account: currentAccount.account,
                game_id: this.myValue.gameId
            }).then(res => {
                let data = res.data;
                if (res.data.code != 0) {
                    layer.msg(data.msg, { time: 2000 });
                    return false;
                }

                layer.msg('绑定成功', { time: 2000 });

                let info = data.data;
                localAccountInfo.forEach((item, index) => {
                    if (item.account === info.account) {
                        localAccountInfo.splice(index, 1);
                    }
                });
                localAccountInfo.unshift(info);
                localStorage.setItem('account_info', JSON.stringify(localAccountInfo));

                juheh5Service.phoneBindCb(info)
                return
            }).catch((error) => {
                layer.msg(error, { time: 1000 });
            });

            return false;
        },
        phoneVerify(phone) {
            const pattern = /^1[3456789]\d{9}$/;
            return pattern.test(phone);
        },
        countDown(seconds) {
            this.count = seconds;
            const updateCountdown = () => {
                this.count--;
                if (this.count > 0) {
                    setTimeout(updateCountdown, 1000);
                }
            }

            updateCountdown();
        },
        handleSyncData() {
            this.$emit("update:modelValue", this.myValue);
        },
    },
};
</script>

<style lang="scss" scoped>
.layui-input-block {
    margin-top: 3px;
    margin-left: 0px !important;
}

.disabled {
    background-color: #31323e !important;
    color: #7e8492 !important;
    cursor: not-allowed !important;
    opacity: 1;
}
</style>
